<template>
  <div style="height:98rem;max-width:93%;text-align:center;">
    <!-- table -->
    <el-table
      :data="tableData"
      border
      height="400px"
      >
          <el-table-column
              v-for="(item,index) in tableData[0]" :key="index"
                :prop="index"
                :label="index"
                width='150'
                height="30"
                >
          </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[15, 25, 50, 100,]"
        :page-size="currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length">
      </el-pagination>
    </div>
</div>
</template>

<script>
  export default {
      name: 'data-table-com',
    data () {
      return {
        currentPage: 1, // 默认显示第1页面
        totals: 0// 总条数  数据类型必须为数字  this.tableData.length
      }
    },
    // mounted(){
    //   this.
    // },
    props: {
      tableData: {
          type: Array
        },
        watch: {
          tableData (val) {
            console.log('---============')
            this.totals = val.length
          }
        },
        height: {
          type: Number,
          default: window.innerHeight - 120
        }
      },
    methods: {
       handleSizeChange (val) {
        console.log(`每页 ${val} 条`)
        this.$emit('getData', {type: 'pageSize', value: val})
      },
      handleCurrentChange (val) {
        console.log(`当前页: ${val}`)
        this.$emit('getData', {type: 'pageNumber', value: val})
      }
    }
  }
</script>
